<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<meta name="author" content="xiaojiangK" />
		<meta name="email" content="740092856@qq.com" />
		<meta name="gitee" content="https://gitee.com/xiaojiangk/" />
		<meta name="viewport" content="width=1200, initial-scale=1.0" />
		<link rel="stylesheet" type="text/css" href="images/css/admin.min.css" />
		<link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />
		<title>admin-button</title>
	</head>
	<body>
		<div class="demo-main">
			<div class="admim-title">
				<h2>Button 按钮</h2>
				<p>表示两种相互对立的状态间的切换，多用于触发「开/关」。</p>
			</div>
			<div class="item">
				<div class="title">
					<h3>Base 类操作</h3>
					<p>调用 Base类各种方法</p>
				</div>
				<div class="content">
					<qx-button>AJAX类</qx-button>
					<qx-button>成功类</qx-button>
					<qx-button>确认框类</qx-button>
					<qx-button>提示类</qx-button>
					<qx-button>渲染类</qx-button>
					<div class="demo"></div>
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>基础用法</h3>
					<p>基础的按钮用法。</p>
				</div>
				<div class="content">
					<qx-button>默认按钮</qx-button>
					<qx-button type="info" size="medium">信息按钮</qx-button>
					<qx-button type="danger" size="small">危险按钮</qx-button>
					<qx-button type="primary" size="mini">主要按钮</qx-button>
					<qx-button type="success" native="submit" size="mini">成功按钮</qx-button>
					<qx-button type="warning" native="reset" size="mini">警告按钮</qx-button>
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>禁用状态</h3>
					<p>按钮不可用状态。</p>
				</div>
				<div class="content">
					<qx-button disabled round>默认按钮</qx-button>
					<qx-button type="info" round disabled size="medium">信息按钮</qx-button>
					<qx-button type="danger" round disabled size="small">危险按钮</qx-button>
					<qx-button type="primary" round disabled size="mini">主要按钮</qx-button>
					<qx-button type="success" round disabled size="mini">成功按钮</qx-button>
					<qx-button type="warning" round disabled size="mini">警告按钮</qx-button>
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>文字按钮</h3>
					<p>没有边框和背景色的按钮。</p>
				</div>
				<div class="content">
					<qx-button type="text">文字按钮</qx-button>
					<qx-button type="text" disabled>文字按钮</qx-button>
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>图标按钮</h3>
					<p>带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。</p>
				</div>
				<div class="content">
					<qx-button type="primary" icon="icon-refresh"></qx-button>
					<qx-button type="primary" icon="icon-edits"></qx-button>
					<qx-button type="primary" icon="icon-share"></qx-button>
					<qx-button type="primary" icon="icon-remove"></qx-button>
					<qx-button type="primary" icon="icon-seekicon">搜索</qx-button>
					<qx-button type="primary" icon="icon-adds">添加代理商</qx-button>
					<qx-button type="primary" icon="icon-loading">加载中</qx-button>
					<span class="uploadFile">
						<qx-button type="primary" icon="icon-uploads" upload>上传</qx-button>
					</span>
					<qx-button type="primary" icon="icon-remove">批量删除</qx-button>
				</div>
			</div>
		</div>

		<div class="attributes">
			<h2>Button Attributes</h2>
			<table>
				<thead>
					<tr>
						<th>参数</th>
						<th>说明</th>
						<th>类型</th>
						<th>可选值</th>
						<th>默认值</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>size</td>
						<td>尺寸</td>
						<td>string</td>
						<td>medium / small / mini</td>
						<td>—</td>
					</tr>
					<tr>
						<td>type</td>
						<td>类型</td>
						<td>string</td>
						<td>primary / success / warning / danger / info / text</td>
						<td>—</td>
					</tr>
					<tr>
						<td>round</td>
						<td>是否圆角按钮</td>
						<td>boolean</td>
						<td>—</td>
						<td>false</td>
					</tr>
					<tr>
						<td>disabled</td>
						<td>是否禁用状态</td>
						<td>boolean</td>
						<td>—</td>
						<td>false</td>
					</tr>
					<tr>
						<td>icon</td>
						<td>图标类名</td>
						<td>string</td>
						<td>—</td>
						<td>—</td>
					</tr>
					<tr>
						<td>native</td>
						<td>原生 type 属性</td>
						<td>string</td>
						<td>button / submit / reset</td>
						<td>button</td>
					</tr>
				</tbody>
			</table>
			<h2>Button Event</h2>
			<table>
				<thead>
					<tr>
						<th>事件名称</th>
						<th>说明</th>
						<th>回调参数</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>upload</td>
						<td>上传文件触发的事件</td>
						<td>上传的文件后的返回值</td>
					</tr>
				</tbody>
			</table>
			<h2>Base Event</h2>
			<table>
				<thead>
					<tr>
						<th>事件名称</th>
						<th>说明</th>
						<th>参数</th>
						<th>回调参数</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>ajax</td>
						<td>ajax 请求类；发起网络请求</td>
						<td>
							url / obj / html / link / data / jsonp / type / async / refresh / dataType / error /
							success / complete / beforeSend / contentType （具体说明注释详见）
						</td>
						<td>response</td>
					</tr>
					<tr>
						<td>success</td>
						<td>成功回调类</td>
						<td>
							ele / code / msg / link / parentRefresh / refresh / remove / type /
							closeLayer（具体说明注释详见）
						</td>
						<td>—</td>
					</tr>
					<tr>
						<td>comfirm</td>
						<td>确认框类</td>
						<td>
							msg / obj / html / link / type / refresh / showCancel / success（具体说明注释详见）
						</td>
						<td>—</td>
					</tr>
					<tr>
						<td>tips</td>
						<td>提示框类</td>
						<td>msg / obj / html / type （具体说明注释详见）</td>
						<td>—</td>
					</tr>
					<tr>
						<td>render</td>
						<td>HTML 渲染类</td>
						<td>msg / obj / html / type （具体说明注释详见）</td>
						<td>—</td>
					</tr>
				</tbody>
			</table>
		</div>

		<script src="images/js/jquery.min.js"></script>
		<script src="images/js/admin.min.js"></script>
		<script>
			$('.uploadFile #fileUp').change(function () {
				$(this).upload({
					success: function (res) {
						console.log(res)
					}
				})
			})

			// Base 类
			var base = new Base()

			// ajax 请求类 参数说明
			// url: '',                                            // 规定发送请求的 URL。默认是当前页面。
			// obj: '',                                            // 父元素标签类或ID、标签。
			// html: '',                                           // 所在父元素中渲染的HTML。
			// link: '',                                           // 提交成功后跳转的链接
			// data: '',                                           // 规定要发送到服务器的数据。
			// jsonp: '',                                          // 在一个 jsonp 中重写回调函数的字符串。
			// type: 'get',                                        // 规定请求的类型（GET 或 POST）。
			// async: true,                                        // 布尔值，表示请求是否异步处理。默认是 true。
			// refresh: false,                                     // 提交成功后是否刷新
			// dataType: '',                                       // 预期的服务器响应的数据类型。
			// error: function() {},                               // 如果请求失败要运行的函数。
			// success: function() {},                             // 当请求成功时运行的函数。
			// complete: function() {},                            // 请求完成时运行的函数。
			// beforeSend: function() {},                          // 发送请求前运行的函数。
			// contentType: 'application/x-www-form-urlencoded'    // 发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。
			$('.qx-button')
				.eq(0)
				.on('click', function () {
					base.ajax({
						successMsg: '提交成功！',
						errorMsg: '提交失败！',
						url: 'upload.php',
						link: 'https://www.baidu.com',
						error(res) {
							console.log(res)
						},
						success(res) {
							console.log(res)
						},
						complete(res) {
							console.log(res)
						},
						beforeSend(res) {
							console.log(res)
						}
					})
				})

			// 成功类参数说明
			// code: '',                // 请求状态
			// msg: '',                 // 提示消息
			// parentRefresh: false     // 是否刷新父级（默认: false）
			// closeLayer: false,       // 关闭layer弹窗（默认: false）
			// link: '',                // 跳转链接
			// refresh: false,          // 是否刷新（默认: false）
			// remove: false,           // 是否删除tr（默认: false）
			// type: 'success',         // 提示类型（默认: success）
			// ele: obj                 // 当前元素
			$('.qx-button')
				.eq(1)
				.on('click', function () {
					base.success({
						code: 100000,
						msg: '这是一个成功操作类！',
						type: 'success'
					})
				})

			// 确认框类参数说明
			// msg: '',                 // 确认框提示语
			// obj: '',                 // 父元素标签类或ID、标签。
			// html: '',                // 所在父元素中渲染的HTML。
			// link: '',                // 提交成功后跳转的链接
			// type: 'warning',         // 提示框类型，默认警告
			// refresh: false,          // 确认后是否刷新，默认false
			// showCancel: true         // 是否显示取消按钮
			// success: Function        // 点击确定成功回调函数
			$('.qx-button')
				.eq(2)
				.on('click', function () {
					base.comfirm({
						// refresh: true,
						msg: '你确定删除吗？',
						link: 'https://www.baidu.com',
						success() {
							console.log('delete success')
						}
					})
				})

			// 提示框类参数说明
			// msg: '',                // 消息框提示语
			// type: 'success',        // 提示框类型，默认成功
			// obj: '',                // 父元素标签类或ID、标签。
			// html: '',               // 所在父元素中渲染的HTML。
			$('.qx-button')
				.eq(3)
				.on('click', function () {
					base.tips({
						refresh: true,
						msg: '这是一个提示类！'
					})
				})

			// 渲染类参数说明
			// msg: '',                // 消息框提示语
			// type: 'success',        // 提示框类型，默认成功
			// obj: '',                // 父元素标签类或ID、标签。
			// html: '',               // 所在父元素中渲染的HTML。
			$('.qx-button')
				.eq(4)
				.on('click', function () {
					base.render({
						msg: '这是一个渲染类！',
						obj: '.demo',
						html: `
                    <div class="admim-title">
                        <h2>我是render Class</h2>
                        <p>主要职责是渲染各种HTML~~</p>
                    </div>
                `
					})
				})
		</script>
	</body>
</html>
